iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
2
Modern Web

重新認識 Flex 和 Grid系列 第 8

[Day08] flexbox justify-content

  • 分享至 

  • xImage
  •  

接下來幾個屬性都和對齊有關,其中 justify-content 這個屬性擅長於操控"主軸上彈性項目的分布",非常適合拿來調整內容。

注意:justify-items 和 justify-self 不屬於 flexbox 的屬性。(忘記可以回顧第四天


justify-content

.container {
    justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly 
}
預設:flex-start

英文小幫手:

justify 有調整、對齊的意思(專注於主軸)
content 內容的意思,所以操控時會專注於所有的內容物(彈性項目)做調整
start 開頭
center 中間
end 尾巴
space-between 將空白空間分配在東西之間
space-around 將空白空間分配在東西兩側
space-evenly 將空白剩下的空間均勻分配

範例

<style>
  .container {
    display: flex;
    justify-content: flex-start; /*改變屬性值來看看變化*/
    width: 240px;
    height: 240px;
    background-color: #a5def5;
  }
  .item{
    margin: 10px;
    width: 40px;
    height: 40px;
    background-color: #00A0E9;
    color: white;
  }
</style>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
  </div>
</body>

接下來會分為兩 part 來各別說明

  1. 位置對齊的 flex-start | center | flex-end
  2. 分佈對齊的 space-between | space-around | space-evenly

(下以皆已 flex-direction: row;(預設)的情況舉例,如果還加上 columnreverse 等等屬性值小心不要搞混主軸的方向。)

1. 位置對齊 flex-start | center | flex-end

對齊的方式以 主軸 為準

  1. justify-content: flex-start;

預設,對齊主軸的開頭

https://ithelp.ithome.com.tw/upload/images/20200922/20128346AZaRZQZf9A.png

  1. justify-content: center;

對齊主軸的中間(常用來做置中處理)

https://ithelp.ithome.com.tw/upload/images/20200922/20128346IyUtD6aEJ2.png

  1. justify-content: flex-end;

對齊主軸的尾巴(這不就是常見的右上導覽列嗎)

https://ithelp.ithome.com.tw/upload/images/20200922/20128346ghzIkmVzmH.png

看起來好像很簡單,但如果數量多、遇到換行的問題,是不是會出現不一樣的變化?

位置對齊(數量多不換行)

現在不做換行,預設 flex-wrap:nowrap;,對齊的原理一樣,裡面的彈性項目會被壓縮,甚至突破彈性容器,這時候如果善用 overflow 這個屬性,就可以變成有卷軸的導覽項目列表等等。

  1. justify-content: flex-start; (預設)

https://ithelp.ithome.com.tw/upload/images/20200922/20128346auYMq2hkJR.png

  1. justify-content: center;

https://ithelp.ithome.com.tw/upload/images/20200922/20128346PSK7Yv6PJJ.png

  1. justify-content: flex-end;

https://ithelp.ithome.com.tw/upload/images/20200922/20128346PXCou4NGuY.png

位置對齊(數量多 + 換行)

如果我要換行?就加上 flex-wrap: wrap;,對齊方式還是一樣,不過每一行會有自己的對齊軸線,不是只有第一行才會對齊。

  1. justify-content: flex-start;(預設)

https://ithelp.ithome.com.tw/upload/images/20200922/20128346RLFFZ8IebR.png

  1. justify-content: center;

https://ithelp.ithome.com.tw/upload/images/20200922/20128346he2C8Duf5T.png

  1. justify-content: flex-end;

https://ithelp.ithome.com.tw/upload/images/20200922/20128346WcNYO1M805.png


2. 分佈對齊 space-between | space-around | space-evenly

分佈對齊(數量多不換行)

數量多時分佈本來就超出容器,所以就會以定義中對齊的位置為準,從中可以發現一些不那麼重要但是特別的特性

對齊的方式同樣以主軸為準

justify-content: space-between;

彈性項目對齊主軸"頭部",如果可以換行,最後一個則對齊尾巴;剩下的塞滿並且平均分配空隙。

https://ithelp.ithome.com.tw/upload/images/20200922/201283465OrNujfRXq.png

justify-content: space-around;

彈性項目對齊主軸"中間",占完彈性項目後,每個彈性項目左右兩側的空隙平均分配。

https://ithelp.ithome.com.tw/upload/images/20200922/20128346dFGyE5Hft9.png

justify-content: space-evenly;

彈性項目對齊主軸"中間",佔完彈性項目後,剩下的空隙平均分配

https://ithelp.ithome.com.tw/upload/images/20200922/20128346QN3AzkpgM8.png

因為只有 space-between 要求要從頭部對齊,所以只有它會像是不換行的 flex-start,其他則是從中間對齊。

分佈對齊(數量多 + 換行)

如果可以換行,排列原理應該會明顯許多,加上等長線讓等長的方式更加明顯(我把item3拉長以便觀察)

justify-content: space-between;

很常使用這個屬性把兩堆東西分到兩側

https://ithelp.ithome.com.tw/upload/images/20200922/20128346UoYgK1Cbao.png

justify-content: space-around;

https://ithelp.ithome.com.tw/upload/images/20200922/20128346uXAiORab9l.png

justify-content: space-evenly;

https://ithelp.ithome.com.tw/upload/images/20200922/201283462D9FZ7HWPo.png

如果你有仔細的看,會發現 space-evenly 的計算上會受到我在彈性項目加的 margin:10px; 影響,而出現兩側所占空間較狹窄的現象,它在計算空間時並不會把 margin 算進去,如果換成 padding 就不會有這個問題。


注意:如果你是看 MDN 裡面 justify-contentsyntax(語法)(MDN justify content),也會發現有一大堆的屬性值可以用,但總歸來說都是屬於 Box Alignment Module,並不是所有的屬性值都屬於 Flexbox Module 。


資料來源:


上一篇
[Day07] flex-wrap 換行 / flex-flow
下一篇
[Day09] flexbox align-content
系列文
重新認識 Flex 和 Grid30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言